<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>已交订金</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/mui.picker.min.css" />
        <link href="css/style.css" rel="stylesheet" />
        <link href="css/skin.css" rel="stylesheet" />
        <script src="js/flexible.js"></script>
	</head>
	<body style="background: none;">
		<header class="mui-bar mui-bar-nav order-bar">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">已交订金</h1>
		</header>
		<div class="loginfrm orderfrm">
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>交订时间</label>
					<button type="button" class='mui-btn timebtn' data-options='{}' id="showUserPicker">请选择时间</button>
				</div>
				<div class="mui-input-row">
					<label>订金金额</label>
					<input type="text" class="inp" value="" placeholder="请输入订金金额">
				</div>
				<div class="mui-input-row">
					<label>备　　注</label>
					<textarea rows="5" placeholder="备注"></textarea>
				</div>
				<div class="mui-button-row">
					<button type="button" class="mui-btn">保 存</button>
				</div>
			</form>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.picker.min.js"></script>
		<script>
			(function() {
				mui.init();
				var btns =mui('#showUserPicker')[0];
				btns.addEventListener('tap', function() {
					var _self = this;
					if(_self.picker) {
						_self.picker.show(function (rs) {
							btns.innerText = rs.text;
							_self.picker.dispose();
							_self.picker = null;
						});
					} else {
						var optionsJson = this.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						/*
						 * 首次显示时实例化组件
						 * 示例为了简洁，将 options 放在了按钮的 dom 上
						 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
						 */
						_self.picker = new mui.DtPicker(options);
						_self.picker.show(function(rs) {
							btns.innerText =  rs.text;
							_self.picker.dispose();
							_self.picker = null;
						});
					}
					
				}, false);
			})(mui);
		</script>
	</body>
</html>
